﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>	
<div class="right" style="font-family: '微软雅黑';">
	<div class=" weiz">
		<a href="" class="fh">首页</a> ><a href="pro.html" class="fh"> 产品中心</a>
		 <c:if test="${productType != null }">
		 	> <a href="javascript:void(0)" class="fh">${productType.name }</a>
		 </c:if>
	</div>
	<div class="list" style="margin: 10px 0 0 0; width: 755px; height: 675px;">
		
		<!-- 产品列表,第一次循环 正常输出   除了第一次 其他的都隐藏，用作分页显示 -->
		<c:forEach begin="0" end="${fn:length(products) / 9 }" var="i">
			
			<c:choose>
				<c:when test="${i == 0 }">
					<ul id="pro_list${i }" class="pro_list">
						<c:forEach begin="${i * 9 }" end="${i * 9 + 8 }" items="${products }" var="p">
							<li><a href="pro/view/${p.id }.html" class="img-lj"><img src="${p.image }" alt="${p.name}" title="${p.name}"
									width="188" height="185" border="0" /></a><a href="pro/view/${p.id }.html" title="${p.name}" class="am">
								<c:choose>
									<c:when test="${fn:length(p.name) > 13 }">
										${fn:substring(p.name, 0, 13) }...
									</c:when>
									<c:otherwise>
										${p.name }								
									</c:otherwise>
								</c:choose>
							</a></li>
						</c:forEach>
					</ul>
				</c:when>
				<c:otherwise>
					<ul id="pro_list${i }" style="display: none;" class="pro_list">
						<c:forEach begin="${i * 9 }" end="${i * 9 + 8 }" items="${products }" var="p">
							<li><a href="pro/view/${p.id }.html" class="img-lj"><img src="${p.image }" alt="${p.name}" title="${p.name}"
									width="188" height="185" border="0" /></a><a href="pro/view/${p.id }.html" title="${p.name}" class="am">
								<c:choose>
									<c:when test="${fn:length(p.name) > 13 }">
										${fn:substring(p.name, 0, 13) }...
									</c:when>
									<c:otherwise>
										${p.name }								
									</c:otherwise>
								</c:choose>
							</a></li>
						</c:forEach>
					</ul>
				</c:otherwise>
			</c:choose>
			
		</c:forEach>
		
		<div class="cle"></div>
	</div>
	
	<!-- 翻页 -->
	<div class="pag">
		<span class="disabled">&lt; </span>
		<c:forEach begin="0" end="${fn:length(products) / 9 }" var="i">
			<a id="${i }" class="pro_page" href="javascript:void(0)"></a>		
		</c:forEach>
	</div>
</div>